<template>
  <div>
    <el-form :inline="true" :model="selectBody" class="demo-form-inline">
      <el-form-item label="Approved by">
        <el-input v-model="selectBody.name" placeholder="Approved by" clearable/>
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-input v-model="selectBody.age" placeholder="Approved by" clearable/>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-date-picker
            v-model="selectBody.address"
            type="date"
            placeholder="Pick a date"
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Query</el-button>
      </el-form-item>
    </el-form>


    <el-table :data="tableData" style="width: 100%">
      <el-table-column v-for="(row, rowIndex) in tableHead"
                       :key="rowIndex"
                       :label="row.label"
                       :prop="row.prop"/>
      <el-table-column align="right">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {ref, reactive} from 'vue'

  export default {
    name: 'ShowTable',
    setup() {
      let selectBody = reactive({
        name: '',
        age: '',
        address: '',
      })
      const onSubmit = () => {
        console.log('onSubmit')
      }

      let tableHead = ref([
        {label: 'Id', prop: 'id'},
        {label: 'Name', prop: 'name'},
        {label: 'Age', prop: 'age'},
        {label: 'Address', prop: 'address'},
      ])
      let tableData = ref([
        {'id': '1', 'name': '张三', 'age': 18, 'address': '中国广东省'},
        {'id': '2', 'name': '李四', 'age': 19, 'address': '中国广东省'},
        {'id': '3', 'name': '王五', 'age': 20, 'address': '中国广东省'},
        {'id': '4', 'name': '赵六', 'age': 21, 'address': '中国广东省'},
      ])
      const handleEdit = (idx, row) => {
        console.log(idx)
        console.log(row)
      }
      const handleDelete = (idx, row) => {
        console.log(idx)
        console.log(row)
      }
      return {
        selectBody,
        onSubmit,

        tableHead,
        tableData,
        handleEdit,
        handleDelete,
      }
    },
  }
</script>

<style scoped>

</style>